<template>
	<view>
		<view class="bj">
			<u-navbar title="就近加油" :autoBack="true" bgColor="#3284fc"
				titleStyle="font-size:18px; color:white;height:44px;line-height:44px" leftIconColor="#fff">
			</u-navbar>
			<view class="search">
				<u-search shape="round" v-model="queryParams.name" @clickIcon="getOilList" placeholder="输入需要搜索的内容" :clearabled="true" :showAction="false" bgColor="#f7f7f7"
					height="80rpx" searchIconColor="#3284fc"
					:customStyle="{width:'200px',marginLeft:'20px'}"></u-search>

				<navigator class="dt" open-type="navigate" url="/pages/refuel/reful_near_dt/reful_near_dt">
					地图模式
				</navigator>
			</view>
			<view class="an">
				<view v-for="(item,index) in oilType" :key="index">
					<u-button type="primary" :text="item.remark"></u-button>
				</view>

			</view>
			<navigator @click="xq(item.id)" v-for="(item,index) in refuelList" :key="index">
				<u-cell-group :border="false"
					:customStyle="{backgroundColor:'#ffffff',borderRadius:'10px',margin:'20px auto',width:'350px'}">
					<u-cell :title="item.name" titleStyle="font-weight:550;font-size:16px">
						<template v-slot:value>
							<span style="color: #3b8dfd; font-size:13px">{{item.distance}}</span>
						</template>
					</u-cell>
					<view class="yh">
						<span>满200减20</span>
						<span>满200减20</span>
					</view>
					<view class="refuel">
						<image :src="item.petrolImage.photo"></image>
						<view class="js">
							<view>营业时间：{{item.startTime}}-{{item.endTime}}</view>
							<view style="color:#FF2525">
								<view v-if="item.chePetrolOil != null">
									<div v-if="item.chePetrolOil[0]!= null">
										￥{{item.chePetrolOil[0].price}}/升
									</div>
								</view>
							</view>
							<u-icon :label="item.address" size="15" labelPos="left" name="/static/images/plane@2x.png"
								labelSize="12px"></u-icon>
						</view>
					</view>
				</u-cell-group>
			</navigator>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					name: null,
				},
				queryParams1: {
					pageNum: 1,
					pageSize: 10,
					shopId: null,
				},
				refuelList: [],
				oilType: [],
				latitude: 34.825845,
				longitude: 113.558364,
			}
		},
		onLoad() {
			this.getOilList();
			this.oil();
			this.getMypostion();
		},
		methods: {
			getMypostion() {
				let that = this;
				uni.getLocation({
					success(res) {
						that.latitude = res.latitude;
						that.longitude = res.longitude;
					}
				})
			},
			calculateDistanceInMeters(lat1, lon1, lat2, lon2) {
				// const R = 6371000; // 地球半径，单位：米 结果为：米
				const R = 6371; // 地球半径，单位：公里 结果为：公里
				const dLat = this.degToRad(lat2 - lat1);
				const dLon = this.degToRad(lon2 - lon1);
				const a =
					Math.sin(dLat / 2) * Math.sin(dLat / 2) +
					Math.cos(this.degToRad(lat1)) * Math.cos(this.degToRad(lat2)) *
					Math.sin(dLon / 2) * Math.sin(dLon / 2);
				const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
				return R * c; // 距离，单位：米
			},
			// 辅助函数：将角度转换为弧度
			degToRad(deg) {
				return deg * (Math.PI / 180);
			},
			xq(id) {
				uni.navigateTo({
					url: '/pages/refuel/refuel_nearby_jy/refuel_nearby_jy?id=' + id,

				})
			},
			getOilList() {
				let that = this
				this.$http({
					url: '/api/shop/petrol/list',
					method: 'GET',
					data: that.queryParams,
					success(res) {
						// console.log(res)
						that.refuelList = res.data.rows
						
						for(let item of that.refuelList){
							let dis = that.calculateDistanceInMeters(that.latitude,that.longitude,item.latitude,item.longitude)
							item.distance = dis.toFixed(2)+"km"
							
						}
						// console.log(that.refuelList)
					}
				})
			},
			oil() {
				let that = this;
				this.$http({
					url: 'api/system/dict/data/type/oil_type',
					method: 'GET',
					success(res) {
						that.oilType = res.data.data;
					}
				})
			},

		}
	}
</script>

<style scoped>
	.js {
		font-size: 12px;
		color: #6c6c6c;
		margin-left: 10px;
	}

	.refuel image {
		width: 100px;
		height: 66px;

		border-radius: 10px;
	}

	.refuel {
		margin: 10px 20px;
		display: flex;
	}

	.yh span {
		background-color: #ffece5;
		margin-left: 15px;
		font-size: 10px;
		color: #FF2525;
		padding: 2px 5px;
		border-radius: 5px;
	}

	.an {
		display: flex;
		justify-content: space-between;
		margin: 20px 20px 0 20px;
	}

	.u-button {
		width: 50px;
		height: 25px;
		border: 1px solid #fff;
		background-color: #3082fb;
	}

	.bj {
		width: 100%;
		height: 220px;
		background-color: #3384fc;
	}

	.search {
		margin-top: 50px;
		display: flex;
		justify-content: space-around;

	}

	.dt {
		width: 40px;
		height: 40px;
		font-size: 14px;
		background-color: #ff6c00;
		border-radius: 50%;
		text-align: center;
		margin: 0 15px 0 15px;
		color: #f7f7f7;
		padding: 7px 7px;

	}
</style>